<template>
  <div class="container-fulid">
    <div class="d-content">
      <div class="goods-photo">
        <img :src="current" alt="" />
        <ul class="small-photo">
          <li
            v-for="(item, index) in data"
            :key="index"
            @mouseover="changephoto(item)"
          >
            <img :src="item" alt="" style="width: 60px; height: 60px" />
          </li>
        </ul>
      </div>
      <div class="goods-info">
        <div>
          <h5>{{ shop.title }}</h5>
          <p>原装进口</p>
        </div>
        <!-- 价格 -->
        <div class="d-price">
          <ul>
            <li>价格：</li>
            <li>￥99.00</li>
          </ul>
          <ul>
            <li>促销价：</li>
            <li style="display: flex">
              <h3>￥{{ shop.price }}</h3>
              <span class="badge bg-danger">品牌促销</span>
            </li>
          </ul>
          <ul>
            <li>本店活动：</li>
            <li class="text-danger">满一件6.8折</li>
          </ul>
          <ul>
            <li>进口税：</li>
            <li class="small">商品报税</li>
          </ul>
        </div>
        <!-- 运费 -->
        <div class="d-yunfei">
          <ul>
            <li>运费：</li>
            <li>
              四川成都至 成都锦江区满88(20Kg内)包邮 满88(20Kg内)包邮
              23:59前付款，承诺明天送达, 可选送货时间
            </li>
          </ul>
        </div>
        <!-- 销量 -->
        <div class="sales">
          <div>月销量6000+</div>
          <div><div class="hr"></div></div>
          <div>送天猫积分14</div>
        </div>
        <!-- 数量 -->
        <div class="d-num">
          <ul>
            <li>数量：</li>
            <li>
              <label
                ><button @click="num--" :disabled="num == 0">-</button
                ><input v-model="num" type="text" /><button @click="num++">
                  +
                </button></label
              >
            </li>
          </ul>
        </div>
        <!-- 购买 -->
        <div class="p-buy">
          <ul>
            <li>
              <button type="button" class="btn btn-lg btn-primary">
                立即购买
              </button>
            </li>
            <li>
              <button
                type="button"
                @click="addcart(shop)"
                class="btn btn-lg btn-danger"
              >
                加入购物车
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <div class="d-tabs">
      <div class="d-adver">
        <div v-for="item in adver" :key="item">
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="d-tab">
        <div class="d-tab-item">
          <div
            v-for="(item, index) in titles"
            :key="index"
            @click="change(index)"
            :class="{ active: index == currentid }"
          >
            {{ item }}
            
          </div>
        </div>
        <div class="d-tab-content" v-if="currentid == 0">
          <img
            style="width: 100%"
            src="https://img.alicdn.com/imgextra/i2/2207725474824/O1CN01FZnOgc1lVRMpRPeZh_!!2207725474824-0-scmitem6000.jpg"
            alt=""
          />
        </div>
        <div class="d-tab-content" v-if="currentid == 1">
          <img src="~assets/image/pinglun.png" alt="" style="width: 100%" />
        </div>
        <div class="d-tab-content" v-if="currentid == 2">
          <img src="~assets/image/shouhou.png" alt="" style="width: 100%" />
        </div>
      </div>
    </div>
    <back-top></back-top>
    <footer-view></footer-view>
    <footers></footers>
  </div>
</template>

<script>
import FooterView from "views/index/footer/FooterView.vue";
import Footers from "views/index/footer/Footers.vue";
import BackTop from "components/content/backTop/BackTop.vue";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  components: { FooterView, Footers, BackTop },
  props: {
    shop: {
      type: Object,
    },
  },
  data() {
    return {
      //广告数据
      adver: [
        "https://img.alicdn.com/imgextra/i3/699634751/O1CN01WR9Gm21ky0Ppp5rrb_!!699634751.jpg",
        "https://img.alicdn.com/imgextra/i2/O1CN01dkktTB1VmoVy0krGb_!!6000000002696-2-tps-188-170.png",
        "https://img.alicdn.com/imgextra/i2/3050969953/O1CN01hsDW0m2NOWlBxQvrW_!!3050969953.jpg",
      ],
      //tab标签数据
      titles: ["商品详情", "评价", "售后服务"],
      //数量
      num: 1,
      currentid: 0,
    };
  },
  methods: {
    //图片改变功能
    changephoto(item) {
      this.current = item;
    },
    //当前选中功能
    change(index) {
      this.currentid = index;
    },
  },
  setup(props) {
    //使用状态管理获取
    const store = useStore();
    let current = ref(props.shop.cover_url);
    let data = ref([
      props.shop.cover_url,
      "https://img.alicdn.com/imgextra/i1/725677994/O1CN015G9YMS28vIriNsa2v_!!725677994.jpg_430x430q90.jpg",
      "https://img.alicdn.com/imgextra/i4/725677994/O1CN01KIDBJa28vIroDjZYR_!!725677994.jpg_430x430q90.jpg",
      "https://img.alicdn.com/imgextra/i4/725677994/O1CN01FXi8m628vIrgqRpDB_!!725677994.jpg_430x430q90.jpg",
      "https://img.alicdn.com/imgextra/i3/3076811321/O1CN0125ZzYX1Ld3v9dqfAK_!!3076811321.png_430x430q90.jpg",
    ]);
    const addcart = (shop) => {
      store.commit("addcart", shop);
      console.log(store.state.cart);
      setTimeout(() => {
        alert("加入成功");
      }, 1000);
    };
    return {
      addcart,
      current,
      data,
    };
  },
};
</script>

<style scoped>
.container-fulid {
  background: #ffffff;
  padding-top: 50px;
}
.container-fulid > .d-content,
.container-fulid > .d-tabs {
  display: flex;
  width: 1190px;
  background-color: #ffffff;
  margin: 0 auto;
  text-align: left;
}
.goods-photo {
  width: 40%;
}
.goods-photo > img {
  border: 1px solid #928a8a;
  width: 418px;
  height: 418px;
}
.small-photo {
  display: flex;
  margin-top: 20px;
}
.small-photo > li {
  margin: 0px 5px;
}
.small-photo > li > img:hover {
  border: 2px solid #000;
}
.goods-info {
  width: 60%;
}
.goods-info h5 {
  font-family: "microsoft yahei";
  font: 12px;
  font-weight: bold;
}
.goods-info p {
  color: red;
  margin-left: 8px;
}
.d-price {
  background: #f6e5e5;
  padding: 10px;
  border-radius: 10px;
}
.d-price > ul,
.d-yunfei > ul,
.d-num > ul {
  margin: 0px 0px 0px 10px;
  padding: 0px;
  display: flex;
}
.d-price > ul > li,
.d-yunfei > ul > li,
.d-num > ul > li {
  font-size: 13px;
  text-align: left;
  line-height: 30px;
}
.d-price > ul > li > h3 {
  color: red;
  font-weight: bold;
}
.badge {
  margin-top: 5px;
  margin-left: 10px;
  height: 20px;
}
.d-yunfei {
  margin-top: 10px;
}
.sales {
  display: flex;
  margin-top: 20px;
  width: 100%;
  height: 30px;
  border-top: 1px solid #928a8a;
  border-bottom: 1px solid #928a8a;
  border-right: 0;
  border-left: 0;
  border-style: dotted;
}
.sales > div {
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  flex: 1;
}
.d-num {
  margin-top: 10px;
  display: flex;
}
.d-num input {
  text-align: center;
  width: 50px;
  height: 30px;
  margin: 0 5px;
}
.d-num button {
  width: 30px;
  height: 30px;
  border: 0px solid #928a8a;
}
.p-buy {
  margin-top: 30px;
}
.p-buy > ul {
  display: flex;
}
.btn-danger {
  margin-left: 20px;
}

.d-tabs > .d-adver {
  margin-top: 100px;
  display: flex;
  flex-direction: column;

  width: 18%;
}
.d-tabs > .d-adver > div {
  padding: 5px;
}
.d-tabs > .d-tab {
  width: 82%;
}
.d-tabs > .d-tab > .d-tab-item {
  cursor: pointer;
  line-height: 30px;
  border: 1px solid rgb(251, 201, 201);
  margin-top: 100px;
  display: flex;
}
.d-tabs > .d-tab > .d-tab-item > div {
  padding: 10px;
  height: 50px;
}
.active {
  color: red;
  font-weight: bold;
}
</style>